package im.actor.server.activation.internal

object EmailTemplate {

  //fixme: load from resources
  val template: String =
    """
      |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      |<html xmlns="http://www.w3.org/1999/xhtml">
      |<head>
      |    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      |    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      |    <title>[Actor] Notifications for May 13th, 2015</title>
      |
      |    <style type="text/css">
      |        /* Template styling */
      |        body {
      |            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      |            width: 100%;
      |            max-width: 100%;
      |            font-size: 17px;
      |            line-height: 24px;
      |            color: #373737;
      |            background: #F9F9F9;
      |        }
      |        table {
      |            width: 100%;
      |            margin: 0 auto;
      |        }
      |        h1, h2, h3, h4 {
      |            color: #2ab27b;
      |            margin-bottom: 12px;
      |            line-height: 26px;
      |        }
      |        p, ul, ul li {
      |            font-size: 17px;
      |            margin: 0 0 16px;
      |            line-height: 24px;
      |        }
      |        ul {
      |            margin-bottom: 24px;
      |        }
      |        ul li {
      |            margin-bottom: 8px;
      |        }
      |        p.mini {
      |            font-size: 12px;
      |            line-height: 18px;
      |            color: #ABAFB4;
      |        }
      |        p.message {
      |            font-size: 16px;
      |            line-height: 20px;
      |            margin-bottom: 4px;
      |        }
      |        hr {
      |            margin: 2rem 0;
      |            width: 100%;
      |            border: none;
      |            border-bottom: 1px solid #ECECEC;
      |        }
      |        a, a:link, a:visited, a:active, a:hover {
      |            font-weight: bold;
      |            color: #439fe0;
      |            text-decoration: none;
      |            word-break: break-word;
      |        }
      |        a:active, a:hover {
      |            text-decoration: underline;
      |        }
      |        .time {
      |            font-size: 11px;
      |            color: #ABAFB4;
      |            padding-right: 6px;
      |        }
      |        .emoji {
      |            vertical-align: bottom;
      |        }
      |        .avatar {
      |            border-radius: 2px;
      |        }
      |        #footer p {
      |            margin-top: 16px;
      |            font-size: 12px;
      |        }
      |
      |        /* Client-specific Styles */
      |        #outlook a {padding:0;}
      |        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto; padding:0;}
      |        .ExternalClass {width:100%;}
      |        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
      |        #backgroundTable {margin:0; padding:0; width:100%; line-height: 100% !important;}
      |
      |        /* Some sensible defaults for images
      |        Bring inline: Yes. */
      |        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
      |        a img {border:none;}
      |        .image_fix {display:block;}
      |
      |        /* Outlook 07, 10 Padding issue fix
      |        Bring inline: No.*/
      |        table td {border-collapse: collapse;}
      |
      |        /* Fix spacing around Outlook 07, 10 tables
      |        Bring inline: Yes */
      |        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
      |
      |        /* Mobile */
      |        @media only screen and (max-device-width: 480px) {
      |            /* Part one of controlling phone number linking for mobile. */
      |            a[href^="tel"], a[href^="sms"] {
      |                text-decoration: none;
      |                color: blue; /* or whatever your want */
      |                pointer-events: none;
      |                cursor: default;
      |            }
      |
      |            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
      |                text-decoration: default;
      |                color: orange !important;
      |                pointer-events: auto;
      |                cursor: default;
      |            }
      |
      |        }
      |
      |        /* Not all email clients will obey these, but the important ones will */
      |        @media only screen and (max-width: 480px) {
      |            .card {
      |                padding: 1rem 0.75rem !important;
      |            }
      |            .link_option {
      |                font-size: 14px;
      |            }
      |            hr {
      |                margin: 2rem -0.75rem !important;
      |                padding-right: 1.5rem !important;
      |            }
      |        }
      |
      |        /* More Specific Targeting */
      |        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      |            /* You guessed it, ipad (tablets, smaller screens, etc) */
      |            /* repeating for the ipad */
      |            a[href^="tel"], a[href^="sms"] {
      |                text-decoration: none;
      |                color: blue; /* or whatever your want */
      |                pointer-events: none;
      |                cursor: default;
      |            }
      |
      |            .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
      |                text-decoration: default;
      |                color: orange !important;
      |                pointer-events: auto;
      |                cursor: default;
      |            }
      |        }
      |
      |        /* iPhone Retina */
      |        @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px)  {
      |            /* Must include !important on each style to override inline styles */
      |            #footer p {
      |                font-size: 9px;
      |            }
      |        }
      |
      |        /* Android targeting */
      |        @media only screen and (-webkit-device-pixel-ratio:.75){
      |            /* Put CSS for low density (ldpi) Android layouts in here */
      |            img {
      |                max-width: 100%;
      |                height: auto;
      |            }
      |        }
      |        @media only screen and (-webkit-device-pixel-ratio:1){
      |            /* Put CSS for medium density (mdpi) Android layouts in here */
      |            img {
      |                max-width: 100%;
      |                height: auto;
      |            }
      |        }
      |        @media only screen and (-webkit-device-pixel-ratio:1.5){
      |            /* Put CSS for high density (hdpi) Android layouts in here */
      |            img {
      |                max-width: 100%;
      |                height: auto;
      |            }
      |        }
      |        /* Galaxy Nexus */
      |        @media only screen and (min-device-width : 720px) and (max-device-width : 1280px) {
      |            img {
      |                max-width: 100%;
      |                height: auto;
      |            }
      |            body {
      |                font-size: 16px;
      |            }
      |        }
      |        /* end Android targeting */
      |
      |
      |    </style>
      |
      |</head>
      |<body>
      |<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="font-size: 17px; line-height: 24px; color: #373737; background: #F9F9F9;">
      |    <tr>
      |        <td valign="top">
      |            <table id="header" width="100%" cellpadding="0" cellspacing="0" border="0">
      |                <tr>
      |                    <td valign="bottom" style="padding: 20px 16px 20px;">
      |                        <div style="max-width: 600px; margin: 0 auto; text-align: center;"></div>
      |                    </td>
      |                </tr>
      |            </table>
      |        </td>
      |    </tr>
      |    <tr>
      |        <td valign="top">
      |            <table id="body" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
      |                <tr>
      |                    <td valign="top">
      |                        <div style="max-width: 600px; margin: 0 auto; padding: 0 12px;text-align:center;">
      |                            <div class="card" style="background: white; border-radius: 0.5rem; padding: 2rem; margin-bottom: 1rem;">
      |                                <h2 style="color: #4b6e99; margin: 0 0 12px; line-height: 30px;">You're almost done.</h2>
      |
      |                                <p style="margin-bottom: 4rem;">
      |                                    Enter this verification code to access Actor:
      |                                </p>
      |
      |                                <!-- <hr style="margin: 1.5rem 0; width: 100%; border: none; border-bottom: 1px solid #ECECEC;" /> -->
      |
      |                                <h1 style="color: #039769; margin: 0 0 12px; line-height: 30px;margin-bottom: 4rem;">$$CODE$$</h1>
      |
      |                                <!-- <hr style="margin: 1.5rem 0; width: 100%; border: none; border-bottom: 1px solid #ECECEC;" /> -->
      |                                <p>Is this my password?</p>
      |                                <p style="font-size: 0.9rem; line-height: 20px; color: #AAA; text-align: center; margin: 0 auto 1rem; max-width: 320px; word-break: break-word; text-align: center; max-width: 100%; margin-bottom: 0;">
      |                                    No. To keep you safe, Actor doesn't use passwords. You'll receive a new temporary code each time you sign in to Actor.</p>
      |
      |                            </div>
      |                    </td>
      |                </tr>
      |            </table>
      |        </td>
      |    </tr>
      |    </td>
      |    </tr>
      |    <tr>
      |        <td>
      |            <table id="footer" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="color: #989EA6;">
      |                <tr>
      |                    <td valign="top" align="center">
      |                        <div style="max-width: 600px; margin: 0 auto;">
      |                            <p class="footer_address" style="margin-top: 16px; font-size: 12px; line-height: 20px;">
      |                                Made by <a href="https://actor.im" style="font-weight: bold; color: #439fe0;">Actor LLC</a> &nbsp;&bull;&nbsp;
      |                                <a href="https://twitter.com/actorapp" style="font-weight: bold; color: #439fe0;">Our Twitter</a><br />
      |                                Rubinsheina 11A &nbsp;&bull;&nbsp; Saint-Petersburg, Russia &nbsp;&bull;&nbsp; 191002
      |                            </p>
      |                        </div>
      |                    </td>
      |                </tr>
      |            </table>
      |        </td>
      |    </tr>
      |</table>
      |</body>
      |</html>
    """.stripMargin

}
